<template>
  <div>
    <!-- 准备表单 -->
    <el-form :model="form" :rules="rules" label-width="120px" ref="form" style="width: 700px">
      <el-form-item label="健身房图片" prop="store_image">
        <el-upload
          class="avatar-uploader"
          name="sbb"
          :action="`${UPLOADURL}/upload`"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="form.store_image"
            :src="form.store_image"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item prop="name" label="健身房名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="选择位置">
        <div id="container" style="height: 200px; border: 1px solid #666"></div>
      </el-form-item>
      <el-form-item prop="store_address" label="详细地址">
        <el-input v-model="form.store_address"></el-input>
      </el-form-item>
      <el-form-item prop="province" label="省份">
        <el-input v-model="form.province"></el-input>
      </el-form-item>
      <el-form-item prop="city" label="城市">
        <el-input v-model="form.city"></el-input>
      </el-form-item>
      <el-form-item prop="area" label="地区">
        <el-input v-model="form.area"></el-input>
      </el-form-item>
      <el-form-item prop="longitude" label="经度">
        <el-input v-model="form.longitude"></el-input>
      </el-form-item>
      <el-form-item prop="dimension" label="纬度">
        <el-input v-model="form.dimension"></el-input>
      </el-form-item>
      <el-form-item label="营业时间" prop="banking_time">
        <el-input v-model="form.banking_time" placeholder="格式：00:00-24:00或24小时营业"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="submit" type="primary">立即修改</el-button>
        <el-button @click="$router.push('/home/gym-list')" >取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import httpApi from "@/http";

export default {
  data() {
    return {
      loading: false, // 是否正在加载中
      form: {
        store_id: this.$route.query.store_id,
        name: "",
        store_address: "",
        province: "",
        store_image:"",
        city: "",
        area: "",
        longitude: "",
        dimension: "",
        banking_time:"",
      },
      rules:{
        store_image:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        name:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        store_address:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        province:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        city:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        area:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        longitude:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        dimension:[
        {required:true, message:'必填', trigger:'blur'}
        ],
        banking_time:[
        { required: true, message: "必填", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
    // 初始化电影类型列表
    // this.listMovieTypes();
    this.queryGymInfo();
  },

  methods: {
    /** 点击提交按钮 */
    submit() {
      this.$refs.form.validate((valid) => {
        console.log(valid);
        if (valid) {
          // 处理请求参数中的特殊字段
          // 发送更新健身房信息的请求
          httpApi.gymApi.update(this.form).then((res) => {
            console.log("修改健身房结果", res);
            if (res.data.code == 200) {
              // 修改成功
              this.$message({ type: "success", message: "成功" });
              this.$router.push("/home/gym-list");
            } else {
              this.$message({ type: "error", message: "系统异常" });
            }
          });
        }
      });
    },

    // 初始化地图
    initMap() {
      AMapLoader.load({
        key: "8bace27665d0513fa5b988530be30abd", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [105.602725, 37.076636], //初始化地图中心点位置
          });
          // 为地图绑定点击事件
          this.map.on("click", (e) => {
            let lng = e.lnglat.KL;
            let lat = e.lnglat.kT;
            console.log({ e, lng, lat });
            // 通过AMap.Geocder，逆地理编码查询位置信息
            let geocoder = new AMap.Geocoder();
            geocoder.getAddress([lng, lat], (status, result) => {
              console.log(status, result);
              // 表单的回填
              this.form.store_address = result.regeocode.formattedAddress;
              let comp = result.regeocode.addressComponent;
              this.form.province = comp.province;
              this.form.city = comp.city ? comp.city : comp.province;
              this.form.area = comp.district;
              this.form.longitude = lng;
              this.form.dimension = lat;
            });
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },

    /* 查询健身房信息 */
    queryGymInfo() {
      let store_id = this.form.store_id;
      httpApi.gymApi.queryById({ store_id }).then((res) => {
        console.log("健身房详情信息", res);
        // 直接将电影详情数据覆盖掉this.form对象
        this.form = res.data.data[0];
        
      });
    },

    /**上传成功后执行 */
    handleAvatarSuccess(res, file) {
      console.log(res);
      // 将上传成功的图片访问路径赋值传给form对象的属性
      this.form.store_image = res.pic;
    },

    /**图片上传之前执行 */
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  height: 178px;
  display: block;
}
</style>
